<template>
  <div>
    <el-form :model="formData" inline class="myForm" ref="myForm">
      <el-form-item label="患者：" prop="patientName">
        <el-input
          v-model="formData.patientName"
          placeholder="请输入患者名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="预约时间：" prop="bookingTime">
        <!-- <el-input
          v-model="formData.bookingTime"
          placeholder="请输入预约时间"
        ></el-input> -->
        <el-date-picker
          v-model="formData.bookingTime"
          type="date"
          placeholder="请输入预约时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary" icon="el-icon-search"
          >查找</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      class="myTab"
      :default-sort="{ prop: 'statu', order: 'ascending' }"
    >
      <el-table-column
        align="center"
        label="预约id"
        prop="bookingId"
        width="70px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="患者名称"
        prop="patientName"
        width="80px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="预约时间"
        prop="bookingTime"
        width="170px"
         
      ></el-table-column>
      <el-table-column
        align="center"
        label="门诊收费"
        prop="outpatientFees"
        width="80px"
      ></el-table-column>
      <el-table-column
        align="center"
        label="科室"
        prop="departmentId"
        width="100px"
      >
        <template slot-scope="scope">
          {{ scope.row["departmentId"] | departmentFilter(departmentOptions) }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="false"
        align="center"
        label="是否住院"
        prop="hospital"
        width="80px"
      ></el-table-column>
      <el-table-column align="center" label="医生" prop="doctorId" width="80px">
        <template slot-scope="scope">
          {{ scope.row["doctorId"] | doctorFilter(doctorOptions) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="就诊状态"
        prop="statu"
        width="120px"
        sortable
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.statu == 1 ? 'success' : ''">
            {{ scope.row["statu"] | filterTableItem(statuOptions) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="success"
            plain
            @click="open(scope.row)"
            icon="el-icon-finished"
            >诊断</el-button
          >
          <el-button
            type="danger"
            plain
            @click="history(scope.row)"
            icon="el-icon-tickets"
            >查看病史</el-button
          >
          <el-button
            type="warning"
            plain
            @click="openin(scope.row)"
            icon="el-icon-office-building"
            >办理入住</el-button
          >
          <el-button
            type="primary"
            plain
            @click="receipts(scope.row)"
            icon="el-icon-printer"
            >打印诊断单</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="病史" align="center" :visible.sync="dialogVisible">
        <el-timeline v-for="(item,index) in historyData" :key="index" rereverse>
    <el-timeline-item :timestamp="item.diseaseTime " placement="top" color='#0bbd87'>
      <el-card>
        <h3>患病名称：{{item.diseaseName}}</h3>
        <h4>确诊医生:
            {{ item.doctorId | doctorFilter(doctorOptions) }}
          </h4>
        <p>患者姓名：{{item.patientName}}</p>
        <p>服用药物：{{item.medicineName}}</p>
        <p>病情概况：{{item.patientDesc}}</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>

  <span slot="footer">
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
     

    <el-dialog title="诊断信息" :visible.sync="diagnoseVisible">
      <el-form
        :rules="formRules"
        ref="diagnoseformref"
        label-width="100"
        :model="diagnoseform"
      >
        <el-form-item label="患者名称" prop="patientName">
          <el-input
            v-model="diagnoseform.patientName"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="患病时间" prop="diseaseTime">
          <div class="block">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="diagnoseform.diseaseTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="患者描述" prop="patientDesc">
          <el-input v-model="diagnoseform.patientDesc"></el-input>
        </el-form-item>
        <el-form-item label="所需药品" prop="medicineName">
          <el-input v-model="diagnoseform.medicineName"></el-input>
        </el-form-item>
        <el-form-item label="疾病名称" prop="diseaseName">
          <el-input v-model="diagnoseform.diseaseName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="diagnose">确定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="办理入住" :visible.sync="inVisible">
      <el-form ref="informref" :model="inform" :rules="inRules">
        <el-form-item label="楼层" prop="floor">
          <el-input v-model="inform.floor"></el-input>
        </el-form-item>
        <el-form-item label="房间号" prop="roomNumber">
          <el-input v-model="inform.roomNumber"></el-input>
        </el-form-item>
        <el-form-item label="床号" prop="bedNumber">
          <el-input v-model="inform.bedNumber"></el-input>
        </el-form-item>
        <el-form-item label="患者名称" prop="patientName">
          <el-input v-model="inform.patientName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="疾病名称" prop="diseaseName">
          <el-input v-model="inform.diseaseName"></el-input>
        </el-form-item>
        <el-form-item label="住院时间" prop="hlTime">
          <div class="block">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="inform.hlTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="预计出院时间" prop="dischargeTime">
          <div class="block">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="inform.dischargeTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="indata">立即住院</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="回执单" :visible.sync="receiptsVisible">
      <el-descriptions :column="4" border v-for="(item, index) in receiptsData"
                    :key="index" direction="vertical"  class="myDesc">
      <el-descriptions-item align="center" label="患者姓名" >{{item.patientName}}</el-descriptions-item>
      <el-descriptions-item align="center" label="确诊结果" >{{item.diseaseName}}</el-descriptions-item>
      <el-descriptions-item align="center" label="所需药品"  >{{item.medicineName}}</el-descriptions-item>
      <el-descriptions-item align="center" label="患病时间" >{{item.diseaseTime}}</el-descriptions-item>
    </el-descriptions>

      <span slot="footer">
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[5, 15, 25, 35, 45]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      class="myStyle"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "doctor",
  comName: "医生就诊",
  comSort: 1,
  data() {
    return {
      tableData: [],
      historyData: [],
      receiptsData: [],
      dialogVisible: false,
      diagnoseVisible: false,
      receiptsVisible: false,
      inVisible: false,
      formData: {
        patientName: "",
        bookingTime: "",
        doctorId: "",
      },
      diagnoseform: {
        diseaseName: "",
        diseaseTime: "",
        medicineName: "",
        patientDesc: "",
        patientName: "",
        uId: "",
        doctorId: "",
        bookingId: "",
      },
      inform: {
        bookingId: "",
        floor: "",
        roomNumber: "",
        bedNumber: "",
        diseaseName: "",
        hlTime: "",
        patientName: "",
        uId: "",
      },
      doctorId: "",
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0,
      },
      statuOptions: [
        { label: "已就诊", value: "1" },
        { label: "未就诊", value: "0" },
      ],
      doctorOptions: [],
      departmentOptions: [],
      formRules: {
        patientName: [
          { required: true, trigger: "blur", message: "请确认正确的信息" },
        ],
        diseaseTime: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
        patientDesc: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
        diseaseName: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
        medicineName: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
      },

      inRules: {
        patientName: [
          { required: true, trigger: "blur", message: "请确认正确的信息" },
        ],
        floor: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
        roomNumber: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
        bedNumber: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
        hlTime: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
        dischargeTime: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
        medicineName: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
        diseaseName: [
          { required: true, trigger: "change", message: "请确认正确的信息" },
        ],
      },
    };
  },

  mounted() {
    this.getDoctorList();
    this.getDepartmentList();
    this.search();
  },

  filters: {
    filterTableItem(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
      });
      if (index < 0) {
        return "---";
      } else {
        return options[index].label;
      }
    },
    doctorFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.doctorId) === Number(value);
      });
      if (index < 0) {
        return "---";
      } else {
        return options[index].doctorName;
      }
    },
    departmentFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.departmentId) === Number(value);
      });
      if (index < 0) {
        return "---";
      } else {
        return options[index].departmentName;
      }
    },
  },
  methods: {
    cancel() {
      this.dialogVisible = false;
      this.inVisible = false;
      this.diagnoseVisible = false;
      this.receiptsVisible = false;
    },

    diagnosecancel() {
      this.diagnoseVisible = false;
    },

    open(row) {
      console.log('11111',row)
      if (row.statu == 1) {
        this.$message.error("该病人已诊断");
      } else {
        this.diagnoseVisible = true;
        this.diagnoseform.uId = row.uId;
        this.diagnoseform.doctorId = row.doctorId;
        this.diagnoseform.bookingId = row.bookingId;
        this.diagnoseform.patientName = row.patientName;
      }
    },
    openin(row) {
      if (row.hospital == 1) {
        this.$message("该病人已办理住院");
      } else {
        this.inVisible = true;
        this.inform.uId = row.uId;
        this.inform.patientName = row.patientName;
        this.inform.bookingId = row.bookingId;
      }
    },

    receipts(row) {
      this.receiptsVisible = true;
      axios({
        url: "/api/doctor/receipts",
        method: "get",
        params: {
          bookingId: row.bookingId,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log(res);
        this.receiptsData = res.data.list;
        console.log(row.bookingId);
      });
    },
    indata() {
      this.$refs.informref.validate((valid) => {
        if (valid) {
          axios({
            url: "/api/doctor/hospitalization",
            method: "post",
            data: {
              ...this.inform,
            },
            headers: {
              token: sessionStorage.getItem("Token"),
            },
          }).then(res => {
             if (res.data.error === 2) {
              this.$message({
                type: "error",
                message: "办理失败",
              });
            } else {
              console.log(res);
          this.historyData = res.data.list;
          this.inVisible = false;
          this.search();
          this.$refs.informref.resetFields();
            }
            

          });
        } else {
        return false
        }
      });
    },

    diagnose() {
      this.$refs.diagnoseformref.validate((valid) => {
        if (valid) {
          axios({
            url: "/api/doctor/diagnosis",
            method: "post",
            data: {
              ...this.diagnoseform,
            },
            headers: {
              token: sessionStorage.getItem("Token"),
            },
          }).then((res) => {
            if (res.data.error === 2) {
              this.$message({
                type: "error",
                message: "诊断错误",
              });
            } else {
              console.log(res);
              this.historyData = res.data.list;
              this.diagnosecancel();
              this.search();

              this.$refs.diagnoseformref.resetFields();
            }
          });
        } else {
          return false;
        }
      });
    },

    history(row) {
      this.dialogVisible = true;
      axios({
        url: "/api/user/historylist",
        method: "get",
        params: {
          uId: row.uId,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log(this.tableData);
        this.historyData = res.data.list;
      });
    },
    search() {
      axios({
        url: "/api/doctor/list",
        method: "get",
        params: {
          ...this.formData,
          doctorId: sessionStorage.getItem("doctorId"),
          limit: this.pageInfo.limit,
          page: this.pageInfo.page,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.pageInfo.total = res.data.total;
      });
    },
    getDoctorList() {
      axios({
        url: "/api/doctor/doctorlist",
        method: "get",
        params: {},
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log("666", res);
        this.doctorOptions = res.data.list;
      });
    },
    getDepartmentList() {
      axios({
        url: "/api/admin/departmentlist",
        method: "get",
        params: {},
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log("666", res);
        this.departmentOptions = res.data.list;
      });
    },
    // 每页多少条切换
    handleSizeChange(value) {
      this.pageInfo.limit = value;
      this.search();
    },
    // 当前页码的切换
    handleCurrentChange(value) {
      this.pageInfo.page = value;
      this.search();
    },
  },
};
</script>

<style lang="scss" scoped>
.myTab {
  width: 95%;
  text-align: center;
  margin: 0 auto;
}

.myForm {
  margin-top: 30px;
  margin-right: 29px;
  text-align: right;
}
.myStyle {
  margin-top: 40px;
  text-align: center;
}
/deep/.el-dialog__body{
  .el-timeline{
   .el-timeline-item{
.el-timeline-item__wrapper{
  
  .el-timeline-item__timestamp{
      font-size: 16px;
      color: black;
  }
}
}
}

}


</style>